<script setup>
import {ref, onMounted} from "vue"
import {useUser} from "@/store/useUser";
import {putProfile} from "@/api/user.js";
import { ElMessage } from 'element-plus'

const userStore = useUser()

const props = defineProps({
  userInfo:{
    type:Object,
    default:()=>{
      return {}
    }
  }
})

const phonenumber = ref('')
onMounted(()=>{
  form.value = {
    wxchat:props.userInfo.wxchat || '',
    flyBook:props.userInfo.flyBook || ''
  }
  phonenumber.value = props.userInfo.phonenumber || ''
})

const form = ref({
  wxchat:'',
  flyBook:''
})

const save = async ()=>{
  if(!form.value.wxchat){ 
    return ElMessage.warning('微信号不能为空')
  }
  try{
    await putProfile(form.value)
    ElMessage.success('更新成功')
    setTimeout(async ()=>{
      await userStore.userInfoAction()
    },1000)
  }catch (e) {
    console.log(e)
  }
}
</script>

<template>
	<div class="acc-info">
		<div class="nickname">
			<span class="label"><span>*</span> 手机号码</span>
			<input type="text" v-model="phonenumber" :placeholder="phonenumber || '请输入手机号码'">
		</div>
		<div class="nickname">
			<span class="label"><span>*</span> 微信号</span>
			<input type="text" v-model="form.wxchat" :placeholder="userInfo.wxchat || '请输入微信号'">
		</div>
		<div class="nickname">
			<span class="label"> 飞书号</span>
			<input type="text" v-model="form.flyBook" :placeholder="userInfo.flyBook || '请输入飞书号'">
		</div>
		<span class="save" @click="save">保存</span>
	</div>
</template>

<style scoped lang="scss">
.acc-info{
	padding: 24px 24px 150px;
}
.title{
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 4px;
}
.tips{
	font-size: 12px;
	color: rgba(25,30,40,0.36);
	margin-bottom: 20px;
}
.head{
	display: flex;
	align-items: center;
	margin-bottom: 40px;
	img{
		width: 80px;
		height: 80px;
		margin-right: 10px;
	}
	button{
		width: 92px;
		height: 42px;
		background: #F9FAFB;
		border-radius: 6px 6px 6px 6px;
		position: relative;
		border: none;
		color: #191E28;
		input{
			position: absolute;
			opacity: 0;
			left: 0;
			top:0;
			width: 100%;
			height: 100%;
			cursor: pointer;
		}
	}
}
.nickname{
	display: flex;
	flex-direction: column;
	margin-bottom: 36px;
	.label{
		color: rgba(25, 30, 40, 1);
		font-size: 16px;
		margin-bottom: 12px;
		span{
			color: #FF4F4F;
		}
	}
	input{
		width: 324px;
		height: 48px;
		border-radius: 8px 8px 8px 8px;
		border: 1px solid rgba(25,30,40,0.08);
		padding: 0 12px;
		outline: none;
	}
}
.save{
	display: block;
	width: 160px;
	height: 48px;
	background: #1DBF73;
	border-radius: 8px 8px 8px 8px;
	color: #fff;
	cursor: pointer;
	line-height: 48px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}
</style>